<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>02_页面固定广告条</title>
  <style>
    .top {
      height: 120px;
      background-color: #5AA4AE;
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
    }
    .right,.left {
      width: 60px;
      height: 200px;
      position: fixed;
      top: 300px;
    }
    .left {
      background-color: #fff799;
      left: 20px;
    }
    .right {
      background-color: #f35336;
      right: 20px;
    }
    .main {
      margin-top: 130px;
    }
  </style>
</head>
<body>
<div class="top">我是顶部的广告条</div>
<div class="left">我是左侧的广告条</div>
<div class="right">我是右侧的广告条</div>
<div class="main">
  我是内容
<!-- lorem*50 Tab -->
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, at, consectetur deleniti dolor, eius ex
    exercitationem expedita fuga fugit hic minima modi nobis omnis provident quaerat sunt tempora! Accusamus, error.
  </div>
  <div>Aliquid deleniti eius et impedit iure tempora vel! Doloribus in iusto modi nesciunt nihil nobis quas quis rem,
    repellat rerum tempora veritatis? Atque eligendi enim fuga iste repellat repellendus tenetur!
  </div>
  <div>Aut est id laudantium maiores modi quidem quis repellendus! A excepturi facilis illum, ipsa maxime reiciendis
    sequi? Ab assumenda dolorum eos excepturi explicabo fuga incidunt magni molestiae, nobis sunt voluptatem.
  </div>
  <div>Ab accusamus alias architecto aspernatur aut autem blanditiis consectetur consequuntur, corporis esse eveniet
    expedita explicabo fugit minus mollitia, necessitatibus non officiis optio praesentium quod repellendus
    reprehenderit similique vel voluptas voluptatibus.
  </div>
  <div>Accusamus aperiam beatae deleniti doloremque eius excepturi exercitationem, maiores nam quaerat quidem
    repellendus suscipit tempora vitae. Adipisci commodi, eius est excepturi expedita impedit, odio odit optio quaerat
    quis rem vel.
  </div>
  <div>Aperiam blanditiis cupiditate nesciunt veniam veritatis? Ad, cupiditate deleniti distinctio explicabo harum
    impedit inventore ipsa magni maiores mollitia odit perspiciatis provident quasi quo rerum sed sequi sint soluta
    temporibus voluptates!
  </div>
  <div>Aliquam autem eaque fuga fugiat fugit harum laudantium mollitia necessitatibus numquam, obcaecati perspiciatis
    quam ratione reiciendis reprehenderit tempore unde, vel! A, facere illum itaque labore officia quos sequi
    voluptatibus voluptatum.
  </div>
  <div>Amet animi culpa id laudantium perferendis tempore voluptas voluptate? Aliquam, mollitia odit quidem quo velit
    voluptate voluptatibus voluptatum! Animi aspernatur assumenda consequatur corporis ea natus officia perspiciatis
    rerum vel velit!
  </div>
  <div>Consequuntur dicta excepturi hic incidunt molestiae officiis sint soluta sunt vitae. Aut, hic repudiandae. Ad
    adipisci atque autem blanditiis consequuntur dignissimos distinctio, exercitationem fugit incidunt iusto officia
    veritatis voluptas voluptatibus.
  </div>
  <div>Adipisci aliquid dolore earum eum fuga id officia quidem, totam veniam veritatis! Aliquid, dolore dolorum enim et
    eveniet excepturi illum laudantium minima minus nemo neque odio qui quis vel voluptas.
  </div>
  <div>Autem, debitis reiciendis. Architecto asperiores eos fuga impedit labore molestiae odit quaerat reprehenderit
    sunt. Atque doloribus ducimus earum fugiat itaque minima quis sit voluptatem. Ad eum illo natus reprehenderit saepe!
  </div>
  <div>Accusamus aut beatae, consectetur dicta dolores ea earum fugit hic in ipsa iste magnam magni molestias nesciunt
    odit officiis optio, placeat qui ratione repellendus suscipit tempora totam vel voluptates voluptatibus.
  </div>
  <div>Dolorem excepturi laudantium, perspiciatis praesentium repudiandae vitae voluptatem. Alias amet aperiam
    architecto dicta, dignissimos dolor dolorem dolorum earum eius et explicabo fuga in molestiae natus perferendis
    placeat quisquam suscipit, temporibus!
  </div>
  <div>Aliquid culpa cum debitis delectus dignissimos esse excepturi explicabo facere ipsa itaque molestias nostrum
    officiis optio possimus provident quaerat quis recusandae, repellat sed sit soluta sunt temporibus vel vero
    voluptas!
  </div>
  <div>Alias atque blanditiis distinctio eaque, expedita iusto laudantium magni porro ratione, repudiandae sit ullam
    veniam voluptas! Ab accusamus ad aliquam aliquid assumenda consequatur dolor repellendus sint? Blanditiis fugit
    mollitia similique.
  </div>
  <div>Ab adipisci debitis, deserunt dicta distinctio error explicabo, fugiat hic iste, maiores maxime optio porro
    repellat similique suscipit. Aspernatur consectetur deleniti doloremque incidunt maiores obcaecati quia velit. Earum
    explicabo, optio.
  </div>
  <div>Ab accusantium ad aliquam, amet animi at, cumque delectus dicta doloremque eligendi excepturi hic iste itaque
    molestias neque nihil nostrum pariatur perspiciatis quasi quisquam sint tenetur unde ut voluptas voluptatem!
  </div>
  <div>Earum, et, eveniet ex ipsam iste maxime minima neque numquam odio quos repudiandae similique suscipit tempore.
    Debitis dolor eaque iste, libero maxime nemo omnis, perspiciatis placeat porro quod reiciendis sequi.
  </div>
  <div>Aspernatur blanditiis consequuntur culpa dicta eaque, earum enim error et eum harum itaque perspiciatis quasi
    quod repellat saepe tenetur, unde veniam. Accusantium at consequatur eaque hic labore molestiae, mollitia
    praesentium?
  </div>
  <div>Doloribus, earum veritatis. Ab beatae cupiditate dolore dolorum ducimus est ex explicabo illum ipsum iure laborum
    maiores minima mollitia nobis nostrum, optio quidem reprehenderit soluta vitae, voluptate? Corporis, numquam rerum!
  </div>
  <div>Ab ad aut culpa dolore doloremque dolores enim explicabo facilis id impedit inventore, laborum magni molestiae
    neque non obcaecati pariatur perspiciatis placeat praesentium saepe sed soluta tempore temporibus totam voluptatum?
  </div>
  <div>Accusamus alias aliquam corporis cupiditate dolorem doloremque dolorum eveniet ipsa iste iure labore maxime neque
    officia officiis porro quaerat quasi qui quia quibusdam, reprehenderit sint suscipit voluptas voluptatem! Atque,
    minus?
  </div>
  <div>Ea excepturi id inventore neque porro quos saepe sed ut. Culpa dolorem, doloribus eos et exercitationem fugit
    harum iste maxime molestiae natus nulla pariatur, possimus quas quo recusandae repudiandae, sed?
  </div>
  <div>Accusamus consequatur consequuntur dignissimos ea exercitationem hic impedit incidunt, nostrum perspiciatis quo.
    Aspernatur atque, corporis dolorum explicabo facere laboriosam libero maxime quod recusandae reiciendis. Accusamus
    aperiam architecto illo reiciendis vero.
  </div>
  <div>Ab blanditiis cumque eveniet numquam officia quia ullam, veritatis vitae voluptatem voluptates. Aspernatur at cum
    debitis deleniti dignissimos enim exercitationem id placeat quae sequi sint tempore velit, veniam vero voluptatibus.
  </div>
  <div>Aliquam blanditiis est excepturi laboriosam quo vel, vitae! Architecto consequatur cum dignissimos fugit hic iste
    labore laboriosam, odit, optio quam quas quidem recusandae sapiente sit sunt, temporibus tenetur ut veniam?
  </div>
  <div>Accusantium ad animi, aperiam dolore dolorum ea error expedita id ipsam itaque libero maiores maxime modi natus
    provident quas qui quod quos rem repellendus sapiente similique suscipit ullam voluptates voluptatum.
  </div>
  <div>Animi eveniet nam quia quibusdam sapiente! Cum deserunt eius eligendi est id minus quasi quis rem repellat
    voluptatum? Deleniti, et, itaque? Aspernatur officia, sunt. Error non perspiciatis porro repellat voluptatum.
  </div>
  <div>Deleniti deserunt eaque eius enim ex fuga in maiores maxime mollitia nobis optio pariatur, praesentium, qui quo,
    quod similique voluptatem voluptatum. Adipisci aliquam dolor officia suscipit voluptates! Est pariatur, vitae?
  </div>
  <div>Aspernatur autem consequatur deleniti dolor dolore doloribus ea eaque enim fuga itaque laudantium maxime minima
    necessitatibus nihil non provident quasi, quis ratione, repellat repudiandae sequi similique sint, soluta tempore
    voluptatum.
  </div>
  <div>Accusamus, at debitis dignissimos eius enim eos et expedita fugit iste iusto labore, natus nobis pariatur quod
    soluta tempora unde. Ab aspernatur enim eum eveniet iure labore modi quia suscipit!
  </div>
  <div>Inventore necessitatibus recusandae repellendus veniam? Consequuntur ea eaque eligendi illum, laborum maiores
    minima nisi nobis omnis qui rem repellat, saepe similique suscipit tempore tenetur ullam. At commodi illum mollitia
    veritatis.
  </div>
  <div>Aspernatur eligendi est eveniet facilis illum ipsa natus necessitatibus, nemo numquam perspiciatis quo
    repellendus repudiandae, soluta sunt unde voluptate voluptatibus. Ex id labore laudantium, optio placeat repudiandae
    similique temporibus ut?
  </div>
  <div>Asperiores dolorum earum mollitia tempora totam, voluptate voluptatum. Doloremque neque odio quos? Dicta
    excepturi expedita illo mollitia optio tempora temporibus voluptatibus. Laborum nulla perspiciatis sunt totam
    voluptatum. Architecto, deserunt esse.
  </div>
  <div>Ad aspernatur commodi consequuntur cupiditate deleniti dicta dolor eius et in iste laudantium necessitatibus
    perferendis, quaerat quas quibusdam quidem, quisquam quos reprehenderit velit voluptatum! Ea eius esse magnam quo
    sint.
  </div>
  <div>Adipisci atque dolore enim et eum fugit incidunt nulla perspiciatis praesentium quas qui vel, vero voluptates?
    Amet aut cum delectus eius fuga hic laboriosam numquam ratione saepe soluta, voluptatem voluptates!
  </div>
  <div>Amet blanditiis dicta dolorum eaque error est eveniet hic in maiores minima nam natus non obcaecati, officia
    sequi vel veritatis! Amet delectus doloribus ducimus et hic nemo porro quisquam unde!
  </div>
  <div>Ad corporis ea error ex itaque maiores modi, quia unde? Assumenda culpa deserunt dignissimos dolore eaque est ex
    facere fuga iste itaque labore nemo praesentium, quasi, quidem ratione repellat vitae?
  </div>
  <div>Alias autem cum cumque, debitis dolore est maxime minima nisi numquam pariatur provident quasi saepe similique.
    Alias assumenda at, consequatur eaque fuga laboriosam magnam nesciunt, nostrum qui sint soluta voluptate.
  </div>
  <div>Facilis ipsa nulla numquam porro sed, soluta voluptatem! Ad adipisci, amet distinctio dolorem dolores dolorum et
    fuga hic impedit ipsum laudantium odio officia qui quidem quod suscipit temporibus voluptas voluptate?
  </div>
  <div>Blanditiis debitis dolor dolorum earum eius et, eum explicabo fuga id ipsam maiores maxime minima molestiae neque
    nesciunt nisi nobis odio odit officia quis quisquam quod recusandae similique tempora velit!
  </div>
  <div>A adipisci animi consequuntur, doloribus eligendi error eum nam nihil obcaecati odio officia placeat quidem
    quisquam, reprehenderit sit ullam veritatis. Dignissimos, illo inventore minus sequi tempora unde vel voluptatum.
    Quod.
  </div>
  <div>Autem consequuntur dignissimos, dolorem dolores ea eos labore laboriosam nisi nobis odio perspiciatis quaerat
    quam, quidem saepe sunt, tempora velit. Alias at autem culpa fuga itaque perspiciatis sint. Ducimus, tenetur!
  </div>
  <div>Consequuntur delectus dicta dolorem ducimus earum enim, eos expedita facere illum impedit iusto laboriosam
    molestias nobis numquam possimus repellendus repudiandae rerum sapiente similique sint tenetur totam, ullam ut
    veniam voluptatum!
  </div>
  <div>Accusantium dicta dignissimos labore quas? Consequatur facere quia velit voluptates? Beatae consequatur eligendi
    esse maxime molestiae possimus quae quam quas sapiente sint. Aperiam dolorem error ex fugiat illum minima quia.
  </div>
  <div>Amet animi illum impedit repudiandae voluptate. Accusantium adipisci amet autem, blanditiis consectetur
    consequuntur corporis dicta dolorem et expedita incidunt inventore minima nisi perspiciatis placeat provident quis
    quo rerum temporibus veniam!
  </div>
  <div>Assumenda enim esse inventore modi numquam quae ullam. Alias amet blanditiis commodi dignissimos distinctio
    dolore dolorem doloribus eius enim exercitationem facilis hic id maxime molestiae quae, quas quidem quisquam sit.
  </div>
  <div>Amet architecto assumenda blanditiis ea eius fugiat harum illo, maiores natus nisi nostrum nulla obcaecati odio
    odit optio pariatur possimus quam quasi sequi soluta tempora tenetur veritatis. Et, qui, recusandae?
  </div>
  <div>Atque aut cumque exercitationem explicabo iste, itaque, laboriosam laudantium, libero molestiae nihil odio
    provident qui quidem quis repellendus reprehenderit repudiandae tenetur! Ad distinctio ducimus eos harum impedit
    modi obcaecati voluptatem.
  </div>
  <div>Aut commodi deleniti dolor dolore dolorem doloremque dolorum et facere fuga illo illum incidunt labore, nesciunt,
    nisi nostrum quam quasi quia quod, similique sit temporibus unde vel veniam voluptatem voluptates.
  </div>
</div>
</body>
</html>
